<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改地址页面</title>
    <style>

        ul {
            list-style-type: none;
            padding: 0;
            width: 80%;
            margin: 0 auto;
        }

        li {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
        }

        input[type="text"] {
            width: calc(100% - 200px);
            padding: 8px;
            font-size: 16px;
            margin-right: 10px;
            box-sizing: border-box;
        }

        button {
            padding: 5px 10px;
            cursor: pointer;
        }

        .button-container {
            display: flex;
            gap: 10px;
        }

        .address-content {
            flex: 1;
            padding-right: 10px;
            font-size: 16px;
        }
    </style>
</head>
<body>
	<table width="100%" height="100%" border="0" cellpadding="1" cellspacing="0" class="TitleColor">
		<tr>
			<td width="15%" valign="top" bgcolor="#E1E1E1" height="100%">
				<div id='leftpage'>
			</td>

			<td width="85%" valign="top">
				<table width="800" border="0" cellpadding="0" cellspacing="0" align="center">
					<tr>
                        <ul id="address-list"></ul>
                    </tr>
                </table>
			</td>
		<tr>
			<td bgcolor="#E1E1E1" align="center">
				<div id='totalpage'></div>
			</td>
			<td height="60" align="center">
				<div id='footerpage'></div>
			</td>
		</tr>
		</tr>
	</table>
</body>

<script>
	function loadScript(c, d) { var b = document.createElement("script"); b.type = "text/javascript"; var e = sessionStorage.getItem(c); e ? (b.textContent = e, d(b)) : fetch(c).then(function (a) { return a.text() }).then(function (a) { b.textContent = a; sessionStorage.setItem(c, a); d(b); location.reload() })["catch"](function (a) { console.error("Error loading the script:", a) }) };
	loadScript("tu_0.js", function (script) { document.head.appendChild(script); });
</script>
<script type="text/javascript" language="javascript">
	if (sessionStorage.getItem("tu_0.js")) {		// 读取记忆是否已保存js文件
		loadHtml("left.htm", "leftpage");
		loadHtml("total.htm", "totalpage");
		loadHtml("footer.htm", "footerpage");
	}

	var first = 0;
	function fun() {
		if (first == 0) {
			first = 1;
			setTimeout(function () { myTimer("cookie", 0, 0, 0, 0) }, 0);		//自动发送post指,只有打开页面的时候，才发送一次送一次
		}
	}
	setInterval("fun()", 100);			// 周期性调用函数 每隔100毫秒调用一次	

    function myTimer(type) {
		var phpName = "index.php";
		var xhr = postPhp(phpName);
		xhr.onreadystatechange = function () {		//2.注册回调函数
			var array_name = txtUnzip(xhr);
			if (array_name != null) {
				if (type == "cookie") {
					cookiemyFunction(array_name)	// 返回的信息在html页面显
				}
			}
		}

		if (type == "cookie") {
			txtZip(xhr, "t:ncki");
		}
	}
	function cookiemyFunction(arr) {
		switch (arr.result) {
		case "ok":
			document.getElementById("totalSpace").textContent = showSpace(arr.totd, arr.usdd);
        break;
        default:
			alert('请先登录后，再操作！');
			window.location.href = "user.htm";
			return false;
		}
	}

    // 从 sessionStorage 中获取地址信息
    function getAddresses() {
        const addresses = sessionStorage.getItem("address");
        return addresses ? addresses.split(',') : [];
    }

    // 保存地址到 sessionStorage
    function saveAddresses(addresses) {
        const addressString = addresses.join(',');
        sessionStorage.setItem("address", addressString);
    }

    // 显示地址列表
    function displayAddresses() {
        const addressList = document.getElementById("address-list");
        addressList.innerHTML = "";
        const addresses = getAddresses();
        addresses.forEach((address, index) => {
            const li = document.createElement("li");
            const buttonContainer = document.createElement('div');
            buttonContainer.classList.add('button-container');
            buttonContainer.innerHTML = `
                        <button onclick="editAddress(${index})">编辑</button>
                        <button onclick="deleteAddress(${index})">删除</button>
                        <button onclick="moveUp(${index})">上移</button>
                        <button onclick="moveDown(${index})">下移</button>
                    `;
            const addressContent = document.createElement('div');
            addressContent.classList.add('address-content');
            addressContent.innerHTML = `<span>${address}</span>`;
            li.appendChild(addressContent);
            li.appendChild(buttonContainer);
            addressList.appendChild(li);
        });
        // 添加新地址输入框和按钮作为列表最后一项
        const newAddressLi = document.createElement('li');
        newAddressLi.innerHTML = `
                    <input type="text" id="new-address" placeholder="输入新地址">
                    <button onclick="addAddress()">添加地址</button>
                `;
        addressList.appendChild(newAddressLi);
    }

    // 添加地址
    function addAddress() {
        const newAddress = document.getElementById("new-address").value;
        if (newAddress) {
            const addresses = getAddresses();
            addresses.push(newAddress);
            saveAddresses(addresses);
            displayAddresses();
            confirm(addresses);
        }
    }

    // 编辑地址
    function editAddress(index) {
        const addressList = document.getElementById("address-list");
        const li = addressList.children[index];
        const addressContent = li.querySelector('.address-content');
        const span = addressContent.querySelector('span');
        const address = span.textContent;

        // 创建输入框
        const input = document.createElement('input');
        input.type = 'text';
        input.value = address;
        input.style.fontSize = '16px';
        input.style.padding = '8px';

        // 替换 span 为输入框
        addressContent.replaceChild(input, span);

        // 替换编辑按钮为保存按钮
        const buttonContainer = li.querySelector('.button-container');
        const editButton = buttonContainer.querySelector('button:first-child');
        editButton.textContent = '保存';
        editButton.onclick = function () {
            const newAddress = input.value;
            const addresses = getAddresses();
            addresses[index] = newAddress;
            saveAddresses(addresses);
            displayAddresses();
            confirm(addresses);
        };
    }

    // 删除地址
    function deleteAddress(index) {
        const addresses = getAddresses();
        addresses.splice(index, 1);
        saveAddresses(addresses);
        displayAddresses();
        confirm(addresses);
    }

    // 上移地址
    function moveUp(index) {
        if (index > 0) {
            const addresses = getAddresses();
            const temp = addresses[index];
            addresses[index] = addresses[index - 1];
            addresses[index - 1] = temp;
            saveAddresses(addresses);
            displayAddresses();
            confirm(addresses);
        }
    }

    // 下移地址
    function moveDown(index) {
        const addresses = getAddresses();
        if (index < addresses.length - 1) {
            const temp = addresses[index];
            addresses[index] = addresses[index + 1];
            addresses[index + 1] = temp;
            saveAddresses(addresses);
            displayAddresses();
            confirm(addresses);
        }
    }
    // 页面加载时显示地址列表
    window.onload = displayAddresses;

    // 确认修改地址函数
    function confirm(addresses) {
        var xhr = postPhp("index.php");
        xhr.onreadystatechange = function () {
            var array_name = txtUnzip(xhr);
            if (array_name != null) {
                confirmFunction(array_name);
            }
        };
        // 先将所有地址组合成一个字符串，然后再进行Base64编码
        var addressString = addresses.join(',');
        var encodedAddressString = txtB64Enc(addressString);
        txtZip(xhr, "t:amad&addr:" + encodedAddressString, 1);
    }

    // 确认函数结果处理
    function confirmFunction(arr) {
        switch (arr.result) {
            case "ok":
                alert('修改成功');
                // window.location.href = "center.htm";
                break;
            case "addr":
                alert("地址不合规");
                return false;
            default:
                alert("其它错误");
                return false;
        }
    }

</script>

</html>